<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>添加管理员</title>
	<link rel="stylesheet" href="/admin/src/css/layui.css">
	<style>
		 select[multiple]+.layui-form-select>.layui-select-title>input.layui-input{ border-bottom: 0}
		select[multiple]+.layui-form-select dd{ padding:0;}
		select[multiple]+.layui-form-select .layui-form-checkbox[lay-skin=primary]{ margin:0 !important; display:block; line-height:36px !important; position:relative; padding-left:26px;}
		select[multiple]+.layui-form-select .layui-form-checkbox[lay-skin=primary] span{line-height:36px !important;padding-left: 10px; float:none;}
		select[multiple]+.layui-form-select .layui-form-checkbox[lay-skin=primary] i{ position:absolute; left:10px; top:0; margin-top:9px;}
		.multiSelect{ line-height:normal; height:auto; padding:4px 10px; overflow:hidden;min-height:38px; margin-top:-38px; left:0; z-index:99;position:relative;background:none;}
		.multiSelect a{ padding:2px 5px; background:#908e8e; border-radius:2px; color:#fff; display:block; line-height:20px; height:20px; margin:2px 5px 2px 0; float:left;}
		.multiSelect a span{ float:left;}
		.multiSelect a i {float:left;display:block;margin:2px 0 0 2px;border-radius:2px;width:8px;height:8px;padding:4px;position:relative;-webkit-transition:all .3s;transition:all .3s}
		.multiSelect a i:before, .multiSelect a i:after {position:absolute;left:8px;top:2px;content:'';height:12px;width:1px;background-color:#fff}
		.multiSelect a i:before {-webkit-transform:rotate(45deg);transform:rotate(45deg)}
		.multiSelect a i:after {-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}
		.multiSelect a i:hover{ background-color:#545556;}
		.multiOption{display: inline-block; padding: 0 5px;cursor: pointer; color: #999;}
		.multiOption:hover{color: #5FB878}
		.layui-form-item .layui-input-inline{width:300px;}
	</style>
</head>

<body >
	<form class="layui-form " style="margin:20px auto;">
		<div class="layui-form-item">
			<label class="layui-form-label">账号</label>
			<div class="layui-input-inline">
				<input type="text" name="account" id="account" lay-verify="required" placeholder="请输入账号" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">姓名</label>
			<div class="layui-input-inline">
				<input type="text" name="real_name" id="real_name" lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
		    <label class="layui-form-label">角色</label>
		    <div class="layui-input-block" style="width:70%">
		      <select name="role_id" id="role_id"  multiple lay-search >
				  <option value="" >选择角色</option>
				  {volist name='roleList' id='item'}
					<option value="{$item['role_id']}" >{$item['role_name']}</option>
				  {/volist}
		      </select>
		    </div>
		</div>
		<div class="layui-form-item">
		    <label class="layui-form-label">账号状态</label>
		    <div class="layui-input-block">
				<input type="radio" name="status" value="1" title="正常" checked>
				<input type="radio" name="status" value="0" title="冻结">
		    </div>
		</div>
		<div class="layui-form-item">
		    <label class="layui-form-label">登录密码</label>
		    <div class="layui-input-inline">
		      <input type="password" name="password" lay-verify="required" placeholder="请输入登录密码" autocomplete="off" class="layui-input">
			  <div class="layui-form-mid layui-word-aux">请填写6到12位数字、字母密码</div>
		    </div>
		</div>
		<div class="layui-form-item">
		    <label class="layui-form-label">确认密码</label>
		    <div class="layui-input-inline">
		      <input type="password" name="confirmPassword" lay-verify="required" placeholder="请输入登录密码" autocomplete="off" class="layui-input">
		    </div>
		</div>
	  <div class="layui-form-item">
	    <div class="layui-input-block">
	      <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
	    </div>
	  </div>
	</form>
	<script src="/admin/src/layui.js" ></script>
<script>
	
    layui.use(['form','jquery'], function(){
      var form = layui.form ,
		  layer = layui.layer,
		  $= layui.jquery;
      
	  $(".downpanel").on("click",".layui-select-title",function(e){
		  var $select=$(this).parents(".layui-form-select");

		  $(".layui-form-select").not($select).removeClass("layui-form-selected");
		  $select.addClass("layui-form-selected");
		  e.stopPropagation();
	  }).on("click",".layui-form-checkbox",function(e){
		  e.stopPropagation();
	  });

	  
      //监听表单提交
      form.on('submit(formDemo)', function(data){
		var postData = data.field;
		console.log(postData);
		$.ajax({
			url: '/admin/admin/addAdmin/data',
			type: 'POST',
			data:postData,
			success : function (backData) {
				//登录成功
			  if(backData['status'] == 200){
				  layer.msg(backData.message,{time:1200},function(){
					  window.parent.frames.location.href="/admin/admin/index"
				  })
				  
			  }else{
				  layer.msg(backData.message);
			  }
			}
		})
        return false;
      });
    });

</script>
</body>
</html>
